:root {
--bg: #f6f7fb;
--card: #fff;
--accent: #7c5cff;
--muted: #6b7280;
--success: #22c55e;
--glass: rgba(124,92,255,0.08);
--radius: 14px;
--shadow: 0 6px 18px rgba(20,20,50,0.06);
}

* {
box-sizing: border-box;
}

html, body {
height: 100%;
margin: 0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
background: var(--bg);
color: #0f172a;
}

.app {
max-width: 1100px;
margin: 20px auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 16px;
}

header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;

}

header h1 {
font-size: 1.05rem;
margin: 0;
}

#backgroundImg {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 80%;
  z-index: 1;
}

nav {
z-index: 200;
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.tab {
background: transparent;
border: none;
padding: 8px 12px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
color: var(--muted);
}

.tab[aria-selected="true"] {
background: var(--glass);
color: var(--accent);
box-shadow: var(--shadow);
}

/* Cards */
.content, .cards {
display: grid;
gap: 18px;
}

.cards {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.habit-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 12px;
background: linear-gradient(180deg,#fff,#fbf8ff);
border: 1px solid rgba(124,92,255,0.06);
}

.habit-title {
font-weight: 700;
color: #0f172a;
margin: 0;
}

.habit-desc {
font-size: 0.85rem;
color: var(--muted);
min-height: 54px;
}

.habit-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: auto;
}

/* Buttons */
.btn {
border: none;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
}

.btn-add {
background: var(--accent);
color: white;
}

.btn-play {
background: transparent;
border: 1px solid rgba(15,23,42,0.06);
padding: 6px 10px;
border-radius: 9px;
}

.btn-ghost {
background: transparent;
border: 1px solid rgba(15,23,42,0.06);
}

/* Tracker */
.tracker-list {
display: flex;
  flex-direction: column;
  gap: 12px;
}


.tracker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-radius: 12px;
padding: 12px 14px;
background: linear-gradient(180deg, #ffffff, #fbfbff);
border: 1px solid rgba(0, 0, 0, 0.04);
box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for desktop */
.tracker-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(20, 20, 50, 0.08);
}

.tracker-left {
display: flex;
gap: 12px;
align-items: center;
flex: 1;
}

.tracker-title {
font-weight: 600;
color: #0f172a;
margin: 0;
}

.tracker-meta {
font-size: 0.85rem;
color: var(--muted);
}

.form-inline {
display: flex;
gap: 8px;
align-items: center;
}

.form-inline input[type="date"],
.form-inline input[type="number"],
.form-inline select {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #e6e9ef;
font-size: 0.9rem;
background: #fff;
}



/* Buttons inside tracker */
.tracker-item .btn {
padding: 6px 12px;
font-size: 0.85rem;
border-radius: 8px;
}

/* Progress bar inside tracker items */
.tracker-progress {
width: 100%;
margin-top: 8px;
height: 8px;
background: #eef2ff;
border-radius: 999px;
overflow: hidden;
position: relative;
}

.tracker-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), #a07bff);
border-radius: 999px;
transition: width 0.3s ease;
}

/* Small label above progress bar */
.tracker-progress-label {
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 4px;
}


input[type="date"], input[type="number"], select {
padding: 8px;
border-radius: 8px;
border: 1px solid #e6e9ef;
font-size: 0.9rem;
background: #fff;
}

/* Progress bars */
.progress-row {
display: flex;
flex-direction: column;
gap: 8px;
}

.progress-bar {
height: 10px;
background: #eef2ff;
border-radius: 999px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #473f69, #5fc4e6);
width: 0%;
}

/* Insights */
.insight-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}

.insight-box {
padding: 10px;
border-radius: 10px;
background: linear-gradient(180deg,#fff,#fbfbff);
text-align: center;
}

.badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}

.badge {
font-size: 0.75rem;
padding: 6px 8px;
border-radius: 999px;
background: #f0f7ff;
color: #08306a;
border: 1px solid rgba(0,0,0,0.04);
}

.streak {
font-weight: 700;
color: var(--accent);
}

/* Heatmap */
.heatmap {
display: grid;
grid-template-columns: repeat(12, 18px);
gap: 4px;
}

.cell {
width: 18px;
height: 18px;
border-radius: 3px;
background: #efefef;
border: 1px solid #1a1a1a63;
display: inline-block;
}

.cell:hover {
outline: 2px solid rgba(0,0,0,0.06);
}

/* Text helpers */
.muted {
color: var(--muted);
font-size: 0.85rem;
}

.danger {
color: var(--danger);
}

/* Toasts */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
padding: 10px 14px;
border-radius: 10px;
box-shadow: var(--shadow);
font-size: 0.85rem;
animation: slideIn 0.3s ease, fadeOut 0.3s ease 3s forwards;
z-index: 999;
}

@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
to { opacity: 0; transform: translateX(100%); }
}

/* Leaderboard */
.leaderboard-item {
padding: 6px 0;
border-bottom: 1px solid #eee;
}

/* Footer */
footer {
font-size: 0.8rem;
color: var(--muted);
text-align: center;
padding: 8px;
}

/* Responsive */
/* Tracker Section Responsive Styles */
@media (max-width: 900px) {

/* Make tracker items stack vertically on small screens */


.tracker-item {
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
   padding: 14px;
 }

 .tracker-left {
   flex-direction: row;
   align-items: center;
   width: 100%;
 }

 .form-inline {
   flex-direction: column;
   align-items: stretch;
   width: 100%;
   gap: 8px;
 }

 .form-inline input,
 .form-inline select,
 .form-inline button {
   width: 100%;
 }

 /* Buttons move below info */
 .tracker-item > div:last-child {
   display: flex;
   flex-direction: column;
   gap: 6px;
   width: 100%;
 }

.tracker-item .form-inline button {
  width: 100%;
}

/* Action buttons below tracker-left info */
.tracker-item > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.cards {
grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
}
}